html,body{
    height:100%;
}
body{
    perspective:800px;
    background:#000;
}

.star{
    width:10px;
    height:10px;
    position:absolute;
    background:#fff;
    border-radius:50%;
    animation:translate 3s linear infinite;
    transform:translateZ(0px) scale(0);
}
.star:nth-child(1){
    top:25%;
    left:60%;
    animation-delay:2s;
}
.star:nth-child(2){
    top:39%;
    left:30%;
    animation-delay:5s;
}
.star:nth-child(3){
    top:77%;
    left:40%;
    animation-delay:3s;
}
.star:nth-child(4){
    top:55%;
    left:25%;
    animation-delay:4s;
}
.star:nth-child(5){
    top:26%;
    left:62%;
    animation-delay:7s;
}
.star:nth-child(6){
    top:43%;
    left:53%;
    animation-delay:1s;
}
.star:nth-child(7){
    top:24%;
    left:56%;
    animation-delay:3s;
}
.star:nth-child(8){
    top:83%;
    left:40%;
    animation-delay:0.5s;
}
.star:nth-child(9){
    top:10%;
    left:50%;
    animation-delay:2s;
}
.star:nth-child(10){
    top:25%;
    left:20%;
    animation-delay:5s;
}

@keyframes translate{
    0%{transform:translateZ(0px) scale(0);}
    100%{transform:translateZ(1000px) scale(1);}
}